<template>
	<ui-panel
		class="bi-order-memo"
		:round="true"
		@click="handleClick"
	>
		<view class="bi-roder-memo__inner">
			<view class="bi-order-memo__main">
				<view class="bi-order-memo__title">
					<text class="bi-order-memo__title-icon"></text>
					<text class="bi-order-memo__title-text">备忘录</text>
				</view>
				<view class="bi-order-memo__description">
					{{ innerValue ? '当前订单数据来源于备忘录' : '保存未确定的订单信息'}}
				</view>
			</view>
			<view class="bi-order-memo__count">
				<template v-if="loading || syncing">
					<ui-icon name="loading"></ui-icon>
				</template>
				<template v-else>
					<template v-if="innerValue">
						<text 
							class="bi-order-memo__clear" 
							title="清除"
							@click.stop="handleClearClick"
						></text>
					</template>
					<template v-else>
						<template v-if="total">
							<text class="bi-order-memo__total">{{ total }}</text>
						</template>
						<template v-else>
							无内容
						</template>
					</template>
				</template>
			</view>
		</view>
	</ui-panel>
</template>

<script>
import { getOrderMemoCount, getOrderMemoData } from '@/apis/order.js'
import { unique } from '@/utils/string.js'
import Event from '@/utils/event.js'
import { buildUrl } from '@/utils/url.js'
import { toJson } from '@/utils/data.js'

export default {
	name: 'BiOrderMemo',
	props: {
		value: {
			type: String
		}
	},
	data () {
		return {
			loading: false,
			syncing: false,
			memoNote: null,
			total: 0
		}
	},
	computed: {
		innerValue: {
			get () {
				return this.value
			},
			set (val) {
				this.$emit('input', val)
			}
		}
	},
	watch: {
		innerValue () {
			if (this.disabledSync) {
				return
			}
			this.syncMemo()
		}
	},
	created () {
		this.selectEventName = unique('order_memo_select')
		this.changeEventName = unique('order_memo_change')
		Event.on(this.selectEventName, ({ memo, memoId }) => {
			this.innerValue = memoId
			this.memoNote = memo.note
			this.disabledSync = true
			this.$emit('change', {
				value: this.memoNote
			})
			this.$nextTick(() => {
				this.disabledSync = false
			})
		})
		Event.on(this.changeEventName, () => {
			this.refresh()
		})
		this.refresh()
		this.syncMemo()
	},
	methods: {
		syncMemo () {
			if (!this.value || this.memoNote) {
				return
			}
			this.syncing = true
			getOrderMemoData(this.value).then(rs => {
				this.memoNote = toJson(rs.note)
				this.$emit('change', {
					value: this.memoNote
				})
				this.$emit('load')
			}).finally(() => {
				this.syncing = false
			})
		},
		refresh () {
			this.loading = true
			getOrderMemoCount().then(rs => {
				this.total = rs
			}).finally(() => {
				this.loading = false
			})
		},
		handleClearClick () {
			this.$emit('clear')
		},
		handleClick () {
			uni.navigateTo({
				url: buildUrl('/packages/order/order-memo/order-memo', {
					selectEventName: this.selectEventName,
					changeEventName: this.changeEventName
				})
			})
		}
	},
	beforeDestroy () {
		Event.off(this.selectEventName)
	}
}
</script>

<style lang="less">
.bi-roder-memo__inner{
	display: flex;
	flex-direction: row;
	align-items: center;
}
.bi-order-memo__main{
	flex: 1;
	min-width: 0;
}
.bi-order-memo__description{
	font-size: 12px;
	color: #666;
}
.bi-order-memo__title{
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-bottom: 3px;
}
.bi-order-memo__title-icon{
	width: 14px;
	height: 14px;
	background: url('./icons/icon.png') no-repeat 50% 50%;
	background-size: cover;
	margin-right: 6px;
}
.bi-order-memo__count{
	color: #666;
	font-size: 12px;
}
.bi-order-memo__total{
	height: 18px;
	line-height: 18px;
	padding: 0 9px;
	border-radius: 9px;
	background-color: #dd6464;
	font-size: 12px;
	color: #fff;
}
.bi-order-memo__clear{
	width: 26px;
	height: 26px;
	border-radius: 50%;
	position: relative;
	display: inline-block;
	background: url('./clear.png') no-repeat 50% 50%;
	background-size: cover;
}
</style>